<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- jquery -->
    <script src="../../frame/semanticUI/jquery.min.js"></script>
    <!-- CDN引入semanticUI框架 -->
    <link rel="stylesheet" type="text/css" href="../../frame/semanticUI/UI-master/semantic.min.css">
    <!-- semanticUI依赖于Jquery -->
    <script src="../../frame/semanticUI/UI-master/semantic.min.js"></script>

    <link rel="stylesheet" href="../../frame/elementUI/lib-master/theme-chalk/index.css"/>
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="../../frame/elementUI/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="../../frame/elementUI/lib-master/index.js"></script>

    <link rel="stylesheet" href="../../css/back.css">
    <title>后台管理页</title>

</head>

<script>
    $(function () {
        $('.ui.dropdown').dropdown({
            on: 'hover'
        });

    });
</script>
<body>
<div id="app">
    <!-- 导航 -->
    <nav class="ui inverted attached segment" style="padding-top: 5px;height: 70px;padding-left: 100px">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">管理后台</h2>
            <a href="../host/manage.html"  class="m-item active item" ><i class="home icon"></i>博客</a>
            <a href="../type/types.html"  class="m-item item"><i class="idea icon"></i>分类</a>
            <a href="../record/archives.html"  class="m-item item" ><i class="clone icon"></i>归档</a>
            <a href="../tag/tags.html"  class="m-item item"><i class="tags icon"></i>标签</a>

            <div class="ui right floated dropdown item">
                <div class="text">
                    <img v-bind:src="admin.imgAvatar" class="ui avatar image">
                    <strong >{{admin.username}}</strong>
                </div>
                <i class="ui dropdown icon"></i>
                <div class="menu">
                    <a href="#" class="item">个人中心</a>
                    <a href="/user/logout" class="item">注销</a>
                </div>
            </div>
        </div>
    </nav>
    <!-- 二级菜单 -->
    <div class="ui attached pointing menu">
        <div class="ui container">
            <div class="right menu">
                <a href="push.html" class="item">发布</a>
                <a href="manage.html" class="active item">列表</a>
            </div>
        </div>
    </div>
    <!-- 中间内容 -->
    <div style="padding-top: 40px;">
        <div class="ui container" style="width: 90%">
            <!-- 搜索 -->
            <el-row>
                <el-form :inline="true" :model="searchData" class="demo-form-inline">
                    <el-form-item>
                        <el-input type="text" v-model="searchData.title" placeholder="标题" />
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="searchData.typeId" placeholder="分类" id="El1">
                            <el-option v-for="type of searchData.selectList" :label="type.name" :value="type.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-checkbox label="推荐" v-model="searchData.recommend" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="findPage()">搜索</el-button>
                    </el-form-item>
                </el-form>
            </el-row>

            <!-- 文章展示表格 -->
            <!-- dataList查询出来的列表，header-cell-style表头颜色,使用reserve-selection属性必须配合row-key,selection-change:多选，当选择项发生变化时会触发该事件 -->
            <el-table height="400" border :data="page.content" v-loading="loading"
                      :header-cell-style="{background:'#f9f9f9',color:'#333'}" row-key="id"
                      @selection-change="handleSelectionChange" ref="multipleTable">
                <el-table-column type="selection" label="全选" :reserve-selection="true" min-width="3%"></el-table-column>  <!-- reserve-selection选择其他页时，之前页选的的框依然存在 -->
                <el-table-column prop="title" label="标题" min-width="30%"></el-table-column>
                <el-table-column prop="type.name" label="分类" min-width="15%"></el-table-column>
                <el-table-column prop="recommend" label="推荐是否" min-width="7%" :formatter="commend"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" min-width="17%"></el-table-column>
                <el-table-column prop="updateTime" label="更新时间" min-width="17%"></el-table-column>
                <el-table-column label="操作" min-width="11%">
                    <template slot-scope="scope">   <!-- 将整个行对象封装为scope -->
                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="rowDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 按钮组 -->
            <div style="margin-top: 10px">
                <tr>
                    <th colspan="6">
                        <el-button type="info" @click="Previous()" plain :disabled="page.firstPage==true">上一页</el-button>
                        <el-button type="info" @click="Next()" plain :disabled="page.lastPage==true" >下一页</el-button>
                        <el-button @click="JumpInput()" icon="el-icon-plus" type="primary" style="float: right">新增</el-button>
                        <el-button @click="delAll()" type="danger" icon="el-icon-delete"  style="float: right;margin-right: 20px" :disabled="multipleSelection.length==0">
                            一键删除
                        </el-button>
                    </th>
                </tr>
            </div>
        </div>
    </div>


</div>

</body>
    <!-- axios -->
    <script src="../../frame/axios/axios.min.js"></script>
<script>

    Vue.config.productionTip=false  //以阻止 vue 在启动时生成生产提示。 <!-- 全局配置 -->
    new Vue({
        el:'#app',
        data:{
            loading: false,   //页面加载,false:关闭,true:加载中
            dialogFormVisible: false,   //是否弹出的添加窗口
            dialogUpdateVisible: false,   //是否弹出的修改窗口
            admin:{
                username: '',
                imgAvatar: ''
            },
            //搜索相关数据
            searchData:{
                title: '',
                selectList:{},
                typeId: null,
                recommend: false,
            },
            //分页数据
            page:{
                content:[],
                currentPage: 0,   //当前页
                pageSize: 3,  //当前页条数
                total: 1,  //数据总条数
                pages : 1,  //总页数
                firstPage : false,  //是否有前一页
                lastPage: false,  //是否有下一页
            },
            //复选框
            multipleSelection: []
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created(){
            this.findData();
            this.insertMeg();
            this.findPage();
            this.findElSelect();
        },
        methods:{
            //获取用户信息
            findData(){
                axios({
                    method: "GET",
                    url: "/user/gainData",
                }).then((res)=>{
                    if(res.data==''){
                        this.$message("您尚未登录")
                    }else{
                        this.admin.username=res.data.username;
                        this.admin.imgAvatar=res.data.avatar;
                    }
                });
            },
            //查看是否添加成功
            insertMeg(){
                axios({
                    method: "GET",
                    url: "/blog/success",
                }).then((res)=>{
                    console.log(res.data);
                    if(res.data!=''){
                        if(res.data=='正确'){
                            this.$message({
                                message: '文章操作成功',
                                type:"success"
                            });
                        }else if(res.data=='错误'){
                            this.$message('文章操作失败');
                        }
                    }

                });
            },
            //获取当前页数据
            findPage(){
                this.loading=true;
                axios({
                    method: "POST",
                    url: "/blog/list/"+this.page.currentPage+"/"+this.page.pageSize,
                    data:{
                        title: this.searchData.title,
                        typeId: this.searchData.typeId,  //分类id
                        recommend: this.searchData.recommend  //是否推荐
                    },
                }).then((res)=>{
                    console.log(res.data);
                    this.page.content=res.data.content;
                    this.page.currentPage=res.data.number;
                    this.page.pageSize=res.data.size;
                    this.page.total=res.data.totalElements;
                    this.page.pages=res.data.totalPages;
                    this.page.firstPage=res.data.first;
                    this.page.lastPage=res.data.last;
                    setTimeout(function () {
                    },1000)
                    this.loading=false;  //关闭加载
                });
            },
            //获取搜索下拉列表数据
            findElSelect(){
                //分类下拉菜单展示
                axios({
                    method: "GET",
                    url: "/blog/gainTypeTag",
                }).then((res)=>{
                    console.log(res.data);
                    this.searchData.selectList=res.data.typeList;
                });
            },
            //跳转到修改页面
            handleUpdate(row){
                axios({
                    method: "get",
                    url: "/blog/selectId/"+row.id,
                }).then((res)=>{
                    console.log(res.data);
                }).finally(()=>{
                    location.href = "manage-update.html";
                });
            },
            //行删除数据
            rowDelete(row){
                this.$confirm("此操作将从数据库中永久删除数据，是否继续？","提示",{
                    confirmButtonText:"确定",
                    cancelButtonText:"取消",
                    type: "warning"
                }).then(()=>{   //选择确定的情况
                    axios({
                        method: "delete",
                        url: "/blog/deleteRow/"+row.id,
                    }).then((res)=>{
                        console.log(res);
                        if(res.data.flag=true){
                            this.$message({
                                message:"删除成功",
                                type:"success"
                            });
                        }else{
                            this.$message(" 删除失败，请重试");
                        }
                    }).finally(()=>{
                        this.findPage();
                    });
                }).catch(()=>{     //选择取消的情况
                    this.$message({
                        type:"into",
                        message:"已取消删除"
                    });
                });
            },
            //多行删除
            delAll(){
                this.$confirm("此操作将从数据库中永久删除数据，是否继续？","提示",{
                    confirmButtonText:"确定",
                    cancelButtonText:"取消",
                    type: "warning"
                }).then(()=>{   //选择确定的情况
                    for(type of this.multipleSelection){
                        axios({
                            method: "delete",
                            url: "/blog/deleteRow/"+type.id,
                        }).then((res)=>{
                            console.log(res);
                            if(res.data=false){
                                this.$message(" 删除失败，请重试");
                            }
                        });
                    }
                    this.$message({
                        message:"删除成功",
                        type:"success"
                    });
                    this.findPage();
                }).catch(()=>{     //选择取消的情况
                    this.$message({
                        type:"into",
                        message:"已取消删除"
                    });
                });
            },
            //多选
            handleSelectionChange(rows){
                this.multipleSelection = rows;
                console.log(this.multipleSelection);  //打印选中的行集合
            },
            //行选框，点击其他行按钮也会选上单选框所以不使用
            handleRowClick(row){
                this.$refs.multipleTable.toggleRowSelection(row);
                console.log(row)  //打印的时当前选中的行
            },
            //上一页
            Previous(){
                this.page.currentPage=this.page.currentPage-1;
                this.findPage();
            },
            //下一页
            Next(){
                this.page.currentPage=this.page.currentPage+1;
                this.findPage();
            },
            //修改推荐
            commend(row,index){
                if(row.studentSex == true){
                    return '是';
                }else{
                    return '否';
                }
            },
            //跳转新增页面
            JumpInput(){
                location.href = "push.html";
            }
        }
    });
</script>
</html>